<template>
  <div>
    <!-- login header -->
    <div class="header">
      <header class="navbar">
        <!-- 左侧导航栏 -->
        <div class="navbar-left">
          <el-menu class="el-menu-demo" mode="horizontal">
            <div class="navbar-logo" @click="logoClickEvent">
              <img src="@/assets/images/logo.png" alt="LOGO">
            </div>
            <span
              style="padding-left: 20px; font-weight: 700; text-align: center; line-height: 55px; opacity: .2;">|</span>
            <div
              style="padding-left: 60px; font-size: 20px; font-weight: 700; text-align: center; line-height: 55px; opacity: .5;">
              欢迎登录</div>
          </el-menu>
        </div>
      </header>
    </div>

    <!-- login content -->
    <div class="login-content">
      <div class="left">
        <div class="left-image">
          <el-image style="width: 500px; height: 400px" src="http://127.0.0.1:3000\uploads\images\login-view\登录页.jpg" fit="cover" />
        </div>
      </div>
      <div class="right">
        <div class="login-box">
          <div class="back-btn">
            <el-button text type="primary" @click="backPage">
              <el-icon>
                <ArrowLeft />
              </el-icon>
              返回
            </el-button>
          </div>
          <div class="login-box-logo" :class="{'login-box-bgc':loginOrRegFlag !== 0,'reg-box-bgc': loginOrRegFlag !== 1}">
            <img src="@/assets/images/logo2.png" alt="">
            <span v-if="loginOrRegFlag === 0" style="right: 30px;">Login</span>
            <span v-else style="right: 40px;">Reg</span>
          </div>

          <!-- login box -->
          <LoginBox @loginOrReg="loginOrRegFunc2" v-show="loginOrRegFlag === 0" />
          <RegBox @loginOrReg="loginOrRegFunc2" v-show="loginOrRegFlag === 1" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue"
import type { FormInstance, FormRules } from 'element-plus'
import {
  User,
  Lock,
  Key,
  ArrowLeft,
  ArrowRight,
} from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import LoginBox from './components/LoginBox/index.vue'
import RegBox from './components/RegBox/index.vue'
import Service from '@/utils/axios'

const route = useRoute()
const router = useRouter()

// const ruleFormRef = ref<FormInstance>()

// 表单验证正则表达式
// const userIdRegex = /^[A-Za-z0-9]{5,17}$/;
// const passwordIdRegex = /^[a-zA-Z]\w{4,16}$/;

// 切换登录注册
const loginOrRegFlag = ref(0)
// 接收切换登录注册事件参数的方法
const loginOrRegFunc2 = (val: number) => {
  loginOrRegFlag.value = val
}

// const checkUserId = (rule: any, value: any, callback: any) => {
//   if (!value) {
//     callback(new Error('请输入账号'))
//   } else if (!userIdRegex.test(value)) {
//     callback(new Error('请输入长度为5-17,由字母和数字组成的账号'))
//   } else {
//     callback()
//   }
// }

// const checkPassword = (rule: any, value: any, callback: any) => {
//   if (!value) {
//     callback(new Error('请输入密码'))
//   } else if (!passwordIdRegex.test(value)) {
//     callback(new Error('请输入长度为5-17,由字母开头，字母和数字组成的密码'))
//   } else {
//     callback()
//   }
// }
// const checkCaptcha = (rule: any, value: any, callback: any) => {
//   if (!value) {
//     callback(new Error('请输入验证码'))
//   } else {
//     callback()
//   }
// }

// const ruleForm = reactive({
//   userId: '',
//   password: '',
//   captcha: '',
// })

// const rules = reactive({
//   userId: [{ validator: checkUserId, trigger: 'blur' }],
//   password: [{ validator: checkPassword, trigger: 'blur' }],
//   captcha: [{ validator: checkCaptcha, trigger: 'blur' }],
// })

// // 提交表单
// const submitForm = (formEl: FormInstance | undefined) => {
//   if (!formEl) return
//   formEl.validate((valid) => {
//     if (valid) {
//       console.log('提交成功!')
//     } else {
//       console.log('提交失败!')
//       return false
//     }
//   })
// }

// // 清空表单
// const resetForm = (formEl: FormInstance | undefined) => {
//   if (!formEl) return
//   formEl.resetFields()
// }

// 返回上一页
const backPage = () => {
  console.log('返回上一页面')
  router.go(-1)
}

// Logo点击事件
const logoClickEvent = () => {
  console.log('跳转到index')
  router.push({
    name: 'Index',
  })
}

</script>

<style lang="less" scoped>
@border-color: #dcdfe6; //边框默认颜色

.header {
  min-width: 1150px;
}

.navbar-logo {
  display: flex;
  align-items: center;

  img {
    width: 179px;
    vertical-align: middle;
  }
}

@media screen and (max-width:1000px){
  .left { display:none; }
}

.login-content {
  min-width: 1150px;
  height: 600px;

  display: flex;
  justify-content: space-around;

  .left {
    position: relative;
    flex: 1.3;

    .left-image {
      width: 500px;
      height: 400px;
      background-color: #8d8a8a;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .right {
    padding: 50px 40px;
    flex: .7;

    &>.login-box {
      height: 500px;
      width: 500px;
      border: 2px solid @border-color;
      border-radius: 10px;
      box-shadow: 5px 5px 10px 5px @border-color;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      position: relative;

      .back-btn {
        position: absolute;
        top: 10px;
        left: 0;

        :deep(.el-button) {
          font-size: 18px;
          font-weight: 700;
        }
      }

      .login-box-bgc {
        background-color: #999;
      }
      .reg-box-bgc {
        background-color: #96b97d;
      }
      .login-box-logo {
        width: 300px;
        height: 100px;
        border-radius: 10px;
        text-align: center;
        line-height: 100px;

        position: relative;



        img {
          opacity: 1;
          height: 120%;
          transform: translate(-30%, -10%);
        }

        span {
          position: absolute;
          right: 30px;
          color: #fff;
          font-size: 30px;
          font-weight: 700;
        }
      }
    }
  }
}
</style>